<template>
	<van-tabbar @change="changeTab" :fixed="fixed" :placeholder="placeholder" route  v-model="active" :border="false">
		<van-tabbar-item
			v-for="(item, i) in tabBarList"
			:key="i"
			:to="item.path"
			:name="i"
		>
			<span>{{ item.text }}</span>
			<template #icon="props">
				<img
					:class="{ isCodeImg: i == 1 ? true : false }"
					:src="props.active ? item.active : item.inactive"
				/>
			</template>
		</van-tabbar-item>
	</van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
	name: 'tab-bar',
	components: {
		'van-tabbar':Tabbar,
		'van-tabbar-item':TabbarItem,
	},
	props: {
		tabBarList: {
			type: Array,
			default: () => {
				return [
					{
						text: '工作台',
						path: '/home',
						active: 'https://img01.yzcdn.cn/vant/user-active.png',
						inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png'
					},
					{
						text: '个人中心',
						path: '/my',
						active: 'https://img01.yzcdn.cn/vant/user-active.png',
						inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png'
					}
				]
			}
		},
		placeholder: {
			type: Boolean,
			default: false
		},
		fixed:{
			type:Boolean,
			default:true
		}
	},
	data() {
		return {
			active: 0
		}
	},
	methods: {
		changeTab(val){
			this.$emit('change',val)
		}
	}
}
</script>
<style lang="less" scoped>
/deep/ .van-tabbar {
	height: 134px;
	background: url('../assets/img-common/menus-bar.png') no-repeat;
	background-size: 100% 100%;
}
/deep/ .van-tabbar-item__text {
	span {
		font-size: 25px;
	}
}
// /deep/ .van-tabbar-item__icon {
//   width: 100%;
//   height: 100%;
// }
/deep/ .van-tabbar-item--active {
	background-color: #00000000;
}

</style>
